<extend name="Public/base"/>

<style>
    .hero-unit h1{
        font-size: 45px;
        margin-bottom: 45px
    }
    .hero-unit p{
        line-height: 1.8em;
        margin-top: 15px;
    }
    .hero-unit .btn-group{
        margin:35px 0;
    }

    .previewBox{margin:0 2%;width: 320px}
    .ArticlePreviewBox{width: 100%;min-height: 80px;border: 1px solid #eee; padding: 10px}
    .firstArticle{}
    .otherArticle{margin-top:5px;padding: 5px;border-top: 1px solid #ddd}
    .coverImage {height:9em;overflow:hidden}
    .coverImage img{ width:100%;}
    .firstTitle{bottom:0;right:0;left:0;height: 3em;padding:5px;background:rgba(0,0,0,0.6)!important;font-size: 1em;color:#fff}
    .firstTitle span {line-height: 1em}
    .itemTitle {width: 79%}
    .indexImage {width: 19%}
    .indexImage img {width: 100%}
    .options{margin:15px}
</style>
<block name="body">
        <div class="container">
            <div class="row">
                <div class="page-header">
                    <h1>微信公众号线上素材<small>图文素材</small></h1>
                </div>
            </div>
            <div class="row">
                <p>以下是您的微信公众号图片素材的列表统计</p>
            </div>
            <div class="row">
                    <ul class="thumbnails">
                        <volist name="news.item" id="vo">
                            <li class="span3">
                                <div id="{$vo.media_id}" class="thumbnail">
                                    <foreach name="vo.articles" key="key" item="value">
                                        <eq name="key" value="0">
                                            <div class="firstArticle">
                                                <div class="coverImage">
                                                    <img src="{$value.thumb_url}">
                                                </div>
                                                <div class="firstTitle">
                                                    <span>{$value.title}</span>
                                                </div>
                                            </div>
                                            <else />
                                            <div class="cf otherArticle">
                                                <div class="fl itemTitle">
                                                    {$value.title}
                                                </div>
                                                <div class="fr indexImage">
                                                    <img src="{$value.thumb_url}">
                                                </div>
                                            </div>
                                        </eq>
                                    </foreach>
                                    <p>上传时间：{$vo.update_time|time_format}</p>
                                </div>
                            </li>
                            <?php if($i > 3 && $i%4 == 0){  ?>
                                </ul>
                                </div>
                                <div class="row">
                                <ul class="thumbnails">
                            <?php } ?>
                        </volist>
                    </ul>
            </div>
        </div>

</block>
<block name="script">
    <script type="text/javascript" charset="utf-8">
        //导航高亮
        highlight_subnav("{:U('WechatMaterial/online')}");
    </script>
</block>